<template>
  <div class="userlogin">
    <div class="passLogin">
      <div class="nav">
        <div :class="isPass ? 'l-tab-list current' : 'l-tab-list'" @click="change(true)">密码登录</div>
        <div :class="!isPass ? 'l-tab-list current' : 'l-tab-list'" @click="change(false)">短信登录</div>
      </div>
      <el-form
        v-if="isPass"
        ref="loginForm"
        :rules="loginRules"
        :model="loginForm"
        class="login-form main"
      >
        <el-form-item label prop="username">
          <el-input v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名"></el-input>
        </el-form-item>

        <el-form-item label prop="password">
          <el-input
            v-model="loginForm.password"
            :type="passwordType"
            auto-complete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn" type="primary" @click="handleLogin">登&nbsp;录</el-button>
          <div class="login-reg">
            <span>忘记密码</span> |
            <span @click="$router.push({
					path:'/register'
				})">注册</span>
          </div>
        </el-form-item>
      </el-form>

	  <el-form
        v-else
        ref="loginForm"
        :rules="loginRules"
        :model="loginForm"
        class="login-form main"
      >
        <el-form-item label prop="phone">
          <el-input @input="loginForm.phone=loginForm.phone.replace(/[^\d]/g,'')" maxlength="11" v-model="loginForm.phone" auto-complete="off" placeholder="请输入手机号"></el-input>
        </el-form-item>

        <el-form-item label prop="password">
          <SliderVerificationCode 
		  	height="40px" 
			sliderWidth="60px"  
			content="按住滑块，拖动到最右边"
			@change="handleChange"
			v-model="value"/>
        </el-form-item>

		<el-form-item v-if="value">
			<el-input v-model="loginForm.smsCode" style="width:100px" prop="smsCode"></el-input>
			<el-button :style="{background: checkPhone() && !getMsg ? '#ffe300' : '#eeeeee',border: '#ffe300'}" @click="getCode">{{getMsg ? countdownNum + '后再试' : '发送验证码'}}</el-button>
		</el-form-item>

        <el-form-item>
          <el-button class="login-btn" type="primary" @click="handleLogin" :style="{background : value ? '#409EFF' : '#eeeeee', border: 'none'}">登&nbsp;录</el-button>
          <div class="login-reg">
            <span>忘记密码</span> |
            <span @click="$router.push({
					path:'/register'
				})">注册</span>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import JcRange from './com'
import { getMsgCode } from '@/api/user'
export default {
  data() {
    return {
		value: true,
		getMsg: false,
		timer: null,
		countdownNum: 59,
		isPass: true,
		loginShow: false,
		loginForm: {
			username: "admin",
			password: "123456"
		},
		loginRules: {
			username: [
			{ required: true, message: "请输入用户名", trigger: "blur" }
			],
			password: [
			{ required: true, message: "请输入密码", trigger: "blur" },
			{ min: 6, message: "密码长度最少为6位", trigger: "blur" }
			],
			phone: [
				{ required: true, message: "请输入手机号码", trigger: "blur" }
			],
			smsCode: [
				{ required: true, message: "请输入验证码", trigger: "blur" }
			],
      },
      passwordType: "password",
      redirect: undefined,
      loading: false
    };
  },
  components: {
	  JcRange
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created () {
	  this.value = false;
  },
  mounted() {
    setTimeout(() => {
	  this.loginShow = true;
	  console.log(this.value, '111')
    }, 30);
  },
  methods: {
    handleLogin() {
		if (!this.isPass && !this.value) return;
		let adress = this.isPass ? 'user/loginByUsername' : 'user/loginByPhone';
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch(adress, this.loginForm)
            .then((res) => {
              console.log(res,"-------登录成功后返回-------");
              this.$store.dispatch('user/GetUserInfo');
              this.$router.push({ path: this.redirect || "/" });
              this.loading = false;
            })
            .catch((err) => {
              console.log('111', err)
				            this.$message({
                        type: 'err',
                        message: err.message
                    })
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
    change(status) {
	  this.isPass = status;
	  if (this.isPass) {
		  this.value = false;
		  this.loginForm.smsCode = '';
	  }
	},
	handleChange (status) {

	},
	checkPhone () { 
		var phone = this.loginForm.phone;
		if(!(/^1[3456789]\d{9}$/.test(phone))){ 
			return false; 
		}
		return true;
	},
	getCode () {
		if (!this.checkPhone() || this.getMsg) return;
		getMsgCode(this.loginForm.phone).then(res => {
			if (res.data.success) {
				this.getMsg = true;
				this.timer = setInterval(() => {
					if (this.countdownNum === 1) {
						clearInterval(this.timer)
						this.getMsg = false;
						this.countdownNum = 59;
					}
					--this.countdownNum;
				}, 1000)
			}
		}).catch(err => {

		})
	}
  }
};
</script>

<style>
.login-form .el-input input {
  background-color: #f5f8fa;
  color: #33475b;
}

.login-form .el-form-item {
  margin-bottom: 24px;
}

.login-form .el-form-item .el-form-item__label {
  color: #666;
  font-weight: 700;
}

.login-form .el-form-item .el-input input:focus {
  border-color: rgba(255, 129, 0, 0.5);
  box-shadow: 0 0 4px 1px rgba(255, 129, 0, 0.3), 0 0 0 1px #ff8100;
  outline: 0;
}

.login-form .el-form-item.is-error .el-input input:focus {
  border-color: rgba(245, 108, 108, 0.5);
  box-shadow: 0 0 4px 1px rgba(245, 108, 108, 0.3), 0 0 0 1px #f56c6c;
  outline: 0;
}
</style>

<style scoped>
.login-btn {
  width: 100%;
}

.forget-pass {
  font-size: 12px;
  color: #ffffff;
}
.passLogin {
  width: 400px;
  border-radius: 5px;
  min-height: 300px;
  background: #ffffff;
  position: relative;
  margin: 0 auto;
  padding: 30px 32px;
  box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.2);
}
.nav {
  font-size: 16px;
  border-bottom: 1px solid #eeeeee;
}
.l-tab-list {
  color: #999999;
  display: inline-block;
  margin-right: 30px;
  border-bottom: 2px solid transparent;
  padding-bottom: 20px;
  margin-bottom: -1px;
  cursor: pointer;
}
.current {
  color: #282828 !important;
  border-bottom: 2px solid #282828;
  font-weight: 500;
}
.main {
  margin-top: 25px;
}
.login-reg {
  text-align: right;
  color: #999999;
}
.login-reg span {
  cursor: pointer;
}
</style>